<template>
  <div class="app-container" v-if="vif">
    <section class="user-status">
      <span
        >认证状态：<el-tag :type="form.status | showStatus">{{
          form.status
        }}</el-tag></span
      >
      <el-button
        @click="passApply"
        type="success"
        class="pass-btn"
        :disabled="form.status !== '待审核'"
        >通过</el-button
      >
      <el-button
        @click="denyApply"
        type="danger"
        class="deny-btn"
        :disabled="form.status !== '待审核'"
        >拒绝</el-button
      >
      <div class="certificate">
        <el-button
          type="primary"
          @click="showCerti = true"
          size="small"
          :disabled="form.status == '待认证'"
          >查看用户上传的证件</el-button
        >

        <el-dialog
          title="用户证件信息"
          :visible.sync="showCerti"
          class="certi_dialog"
        >
          <p>身份证正面</p>
          <el-upload
            class="avatar-uploader"
            :action="baseURL"
            :show-file-list="false"
            :on-progress="uploadCertLoad"
            :on-success="id_card_frontSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="form.id_card_front"
              :src="form.id_card_front"
              title="身份证正面"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <p>身份证背面</p>
          <el-upload
            class="avatar-uploader"
            :action="baseURL"
            :show-file-list="false"
            :on-progress="uploadCertLoad"
            :on-success="id_card_backSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="form.id_card_back"
              :src="form.id_card_back"
              title="身份证背面"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <p>学生证</p>
          <el-upload
            class="avatar-uploader"
            :action="baseURL"
            :show-file-list="false"
            :on-progress="uploadCertLoad"
            :on-success="student_cardSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="form.student_card"
              :src="form.student_card"
              title="学生证"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <p>其他证件</p>
          <el-upload
            class="avatar-uploader"
            :action="baseURL"
            :show-file-list="false"
            :on-progress="uploadCertLoad"
            :on-success="other_imgfrontSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="form.other_img"
              :src="form.other_img"
              title="其他证件"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-dialog>

        <span>接单权限</span>
        <el-switch
          active-color="#13ce66"
          inactive-color="#ff4949"
          class="applyswitch"
          :value="form.status === '已认证'"
          @change="switchChange"
        >
        </el-switch>
      </div>
    </section>
    <el-form ref="form" :model="form" label-width="80px" class="user-info">
      <el-form-item>
        <el-button
          type="primary"
          @click="updateFrom"
          class="update-btn"
          v-show="!isEditing"
          >修改</el-button
        >
        <el-button
          type="primary"
          @click="confirmUpdate"
          class="update-btn"
          v-show="isEditing"
          >确认</el-button
        >
        <el-button
          type="danger"
          @click="cancelUpdate"
          class="update-btn"
          v-show="isEditing"
          >取消</el-button
        >
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="form.nickName" :disabled="!isEditing"> </el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name" :disabled="!isEditing"> </el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender" :disabled="!isEditing">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="form.phone" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.mail" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="省份">
        <el-input v-model="form.provinces" disabled></el-input>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.address" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="账户">
        <el-select
          v-model="form.account"
          placeholder="账户"
          :disabled="!isEditing"
        >
          <el-option label="支付宝" value="alipay" selected></el-option>
          <el-option label="微信" value="wxpay"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付账号">
        <el-input
          v-model="form.accountNumber"
          :disabled="!isEditing"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="form.status"
          placeholder="用户认证状态"
          :disabled="!isEditing"
        >
          <el-option label="待认证" value="待认证" selected></el-option>
          <el-option label="待审核" value="待审核"></el-option>
          <el-option label="未通过" value="未通过"></el-option>
          <el-option label="已认证" value="已认证"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="身份证正">
        <el-input
          v-model="form.id_card_front"
          :disabled="!isEditing"
        ></el-input>
      </el-form-item>

      <el-form-item label="身份证反">
        <el-input v-model="form.id_card_back" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="学生证">
        <el-input v-model="form.student_card" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-input v-model="form.avatarUrl" :disabled="!isEditing"></el-input>
      </el-form-item>
      <el-form-item label="其他">
        <el-input v-model="form.other_img" :disabled="!isEditing"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import "@/styles/common.css";
import { updateUser, getUser } from "@/api/consumer";
import axios from "axios";
import Axios from "axios";
export default {
  data() {
    return {
      form: {},
      formCopy: {}, // 用于还原取消按钮后原数据的 临时表单
      isEditing: false, // 是否正在编辑表单状态
      showCerti: false, //是否展示证件
      openId: "", // 微信的openID
      vif: false, //如果不带applyid进入页面不显示
      loading: {},
      baseURL: Axios.defaults.baseURL + "uploadCertificate"
    };
  },
  filters: {
    showStatus(status) {
      const statusMap = {
        待认证: "info",
        待审核: "danger",
        未通过: "warning",
        已认证: "success"
      };
      return statusMap[status];
    }
  },
  created() {
    if (this.$route.params.applyId === ":applyId") {
      this.$message({
        message: "请从用户列表进入此页面",
        type: "error"
      });
      return;
    }
    this.vif = true;
    this.openId = this.$route.params.applyId;
    this.fetchFormData();
  },
  methods: {
    // 渲染数据
    fetchFormData() {
      getUser(this.openId).then(res => {
        this.form = res.data.data[0];
        this.listLoading = false;
      });
    },
    // 表单修改部分
    updateFrom() {
      this.isEditing = true;
      const form = this.form;
      // 备份form的数据
      for (const key in form) {
        if (Object.hasOwnProperty.call(form, key)) {
          this.formCopy[key] = form[key];
        }
      }
    },
    // 取消修改
    cancelUpdate() {
      this.isEditing = false;
      const formCopy = this.formCopy;
      // 还原备份
      for (const key in formCopy) {
        if (Object.hasOwnProperty.call(formCopy, key)) {
          this.form[key] = formCopy[key];
        }
      }
    },
    // 确认修改
    confirmUpdate() {
      this.isEditing = false;
      updateUser(this.openId, this.form).then(res => {
        this.tipRefresh(res, false);
      });
    },
    // 提示成功并刷新
    tipRefresh(res, isFresh) {
      //提示并刷新页面
      this.$message({
        message: res.data.meta.msg,
        type: "success",
        onClose: () => {
          if (isFresh) {
            window.location.reload(); //更新页面
          }
        }
      });
    },
    // 审核状态开关
    switchChange() {
      if (this.form.status === "已认证") {
        this.form.status = "待认证";
        updateUser(this.openId, { status: "待认证" }).then(res => {
          this.tipRefresh(res, false);
        });
      } else {
        this.form.status = "已认证";
        this.passApply();
      }
    },
    // 权限通过
    passApply() {
      updateUser(this.openId, { status: "已认证" }).then(res => {
        this.form.status = "已认证";
        this.tipRefresh(res, false);
      });
    },
    denyApply() {
      updateUser(this.openId, { status: "未通过" }).then(res => {
        this.form.status = "未通过";
        onCvY5VL9dMTgCM5mb_SpjbatFRc;
        this.tipRefresh(res, false);
      });
    },
    // 上传图片加载提示
    uploadCertLoad() {
      this.loading = this.$loading({
        lock: true,
        text: "上传图片中...请耐心等待",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    // 上传前校验
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 上传图片：上传图片类型、图片地址、渲染地址
    uploadImg(type, address, raw) {
      updateUser(this.openId, { [type]: address }).then(() => {
        this.loading.close();
        this.form[type] = URL.createObjectURL(raw);
        this.$message({
          message: "上传成功",
          type: "success"
        });
      });
    },
    //身份证正
    id_card_frontSuccess(res, file) {
      if (res.code == 200) {
        this.uploadImg("id_card_front", res.data, file.raw);
      } else {
        console.log(res);
      }
    },
    //身份证反
    id_card_backSuccess(res, file) {
      if (res.code == 200) {
        this.uploadImg("id_card_back", res.data, file.raw);
      } else {
        console.log(res);
      }
    },
    //学生证
    student_cardSuccess(res, file) {
      if (res.code == 200) {
        this.uploadImg("student_card", res.data, file.raw);
      } else {
        console.log(res);
      }
    },
    //其他证件
    other_imgfrontSuccess(res, file) {
      if (res.code == 200) {
        this.uploadImg("other_img", res.data, file.raw);
      } else {
        console.log(res);
      }
    }
  }
};
</script>

<style scoped>
.user-info {
  padding: 20px 24px 4px 4px;
  margin-right: 40%;
  min-width: 500px;
  box-shadow: 0 2px 12px 2px rgba(68, 73, 77, 0.16);
}
.update-btn {
  float: right;
}
.user-status {
  min-width: 500px;
  margin-right: 40%;
  padding: 20px;
}
.pass-btn,
.deny-btn {
  margin-left: 20px;
}
.certificate {
  padding-top: 20px;
}
.certificate span {
  margin-left: 20px;
}
.applyswitch {
  margin-left: 20px;
}
/* 用户证件 */
.certi_dialog {
  width: 100%;
  padding-top: 0;
}
.certi_dialog p {
  font-size: 24px;
  margin: 0;
}
/* 用户上传按钮 */
.avatar {
  max-width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  border: 1px solid #eee;
  line-height: 178px;
  text-align: center;
}
</style>
